<script setup lang="ts">
import CustomNavbar from '@/pages/index/components/CustomNavbar.vue'
import XtxSwiper from '@/components/XtxSwiper.vue'
import { ref } from 'vue'
import type { HomeBanner, HomeCategory, HomeHot } from '@/types/home'
import { getHomeBannerApi, getHomeCategoryApi, getHomeHotApi } from '@/api/home.ts'
import CategoryPanel from '@/pages/index/components/CategoryPanel.vue'
import HotPanel from '@/pages/index/components/HotPanel.vue'
import XtxGuess from '@/components/XtxGuess.vue'
import IndexSkeleton from '@/pages/index/components/IndexSkeleton.vue'
import { useGuessList } from '@/composables/useGuessList.ts'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

const bannerList = ref<HomeBanner[]>([])
const getHomeBanner = async () => {
  const res = await getHomeBannerApi()
  bannerList.value = res.result
}

const categoryList = ref<HomeCategory[]>([])
const getHomeCategory = async () => {
  const res = await getHomeCategoryApi()
  categoryList.value = res.result
}

const hotList = ref<HomeHot[]>([])
const getHomeHot = async () => {
  const res = await getHomeHotApi()
  hotList.value = res.result
}

// 请求首页除了猜你喜欢的所有数据，isLoading 为 true 时，显示 骨架屏，为 false 时，显示数据
const isLoading = ref(true)
const getData = async () => {
  isLoading.value = true
  // 使用 try...catch...finally... 的方式保证，即使有一个请求失败，其他请求的内容也可以显示，而不是显示骨架屏
  try {
    await Promise.all([getHomeBanner(), getHomeCategory(), getHomeHot()])
  } catch (error) {
    // 可选：记录错误或提示用户
    console.error('首页数据加载失败', error)
  } finally {
    isLoading.value = false // 即使请求失败，骨架屏也能退出，避免页面卡死
  }
}
getData()

// 上拉加载
const { guessRef, onScrolltolower } = useGuessList()

// 下拉刷新，isTriggered 表示是否正在下拉刷新，isTriggered 为 true 时，表示正在下拉刷新，为 false 时，表示没有下拉刷新
const isTriggered = ref(false)
const onRefresherrefresh = async () => {
  try {
    isTriggered.value = true
    guessRef.value?.resetHomeGoods() // 重置猜你喜欢数据
    // 请求并行发送，都成功后才关闭下拉刷新，这样子就比一个请求请求完再请求一个要快得多
    await Promise.all([
      getData(),
      // 这个函数得调用才会拿到一个 promise，不调用的话相当于传一个函数进去 Promise.all，这个函数不会执行的
      guessRef.value?.getHomeGoods(),
    ])
  } catch (error) {
    console.error('下拉刷新失败', error)
  } finally {
    isTriggered.value = false
  }
}

// 转发给朋友
onShareAppMessage(() => ({
  title: '小兔鲜商城',
  path: '/pages/index/index',
}))
// 转发到朋友圈
onShareTimeline(() => ({}))
</script>

<template>
  <CustomNavbar></CustomNavbar>
  <scroll-view
    scroll-y
    class="scroll-view"
    @scrolltolower="() => !isLoading && onScrolltolower()"
    refresher-enabled
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
  >
    <IndexSkeleton v-if="isLoading"></IndexSkeleton>
    <view v-show="!isLoading">
      <XtxSwiper :list="bannerList"></XtxSwiper>
      <CategoryPanel :list="categoryList"></CategoryPanel>
      <HotPanel :list="hotList"></HotPanel>
      <XtxGuess ref="guessRef"></XtxGuess>
    </view>
  </scroll-view>
</template>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f7f7f7;
}

.scroll-view {
  flex: 1;
}
</style>
